<template>
  <h1>hello vue3 + vite</h1>
  <p>this is first app</p>
  <hr>
  <!-- 
  dom中使用ref数据，直接使用代理即可
  js中，需要加上value属性
  -->
  年龄是：{{ age }}
  <hr>
  <button @click="changeAge">修改年龄</button>
</template>

<script setup>
//控制组件逻辑
import {ref} from 'vue';

//创建响应式数据
//const let var
//age.value
//age数据代理
//proxy，实现代理
const age = ref(2);
//修改
age.value = 30;
console.log(age.value);
console.log(age);


//定义函数修改年龄
function changeAge(){
  console.log("changeAge be called");
  age.value++;
}
</script>

<style scoped>
/* scoped控制样式作用范围 */
</style>